<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缺陷分类占比</title>
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        项目：
        <el-select v-model="value1" placeholder="请选择" @change="selectBy">
            <el-option
                    v-for="project in projects"
                    :label="project.projectName"
                    :value="project.projectId">
            </el-option>
        </el-select>
        <span class="demonstration">创建时间：</span>
        <el-date-picker
                v-model="date1"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
        </el-date-picker>-
        <span class="demonstration"></span>
        <el-date-picker
                v-model="date2"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="primary" @click="selectTypeCount()">查询</el-button>
        <el-button type="primary" @click="daochu()">导出</el-button>
    </div>
    <div id="chartmain" style="position: relative; width: 554px; height: 636px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div>
</div>
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el:"#app",
        data:{
            option : {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            projects : null,
            value1 : "",
            pid : 0,
            date1 : "",
            date2 : ""
        },
        created:function(){
            this.selectproject();
            this.selectTypeCount();
        },
        methods:{
            daochu : function(){
                var mycanvas = $("#chartmain").find("canvas")[0];
                var image = mycanvas.toDataURL("image/jpeg");
                var $a = document.createElement('a');
                $a.setAttribute("href", image);
                $a.setAttribute("download", "echarts图片下载");
                $a.click();
            },

            selectBy : function(id){
              var _this = this;
              _this.pid=id;
            },

            selectTypeCount : function(){
                var _this = this;
                $.ajax({
                    url : "/severity/count",
                    type : "get",
                    data : {
                        id : _this.pid,
                        date1 : _this.date1,
                        date2 : _this.date2
                    },
                    dataType : "json",
                    success : function(data) {
                        var arr = [];
                        for(let i = 0 ; i < data.list.length; i++){
                            var jsontype = {
                                value : data.list[i].count1,
                                name : data.list[i].severityDesc
                            }
                            arr.push(jsontype);
                        };
                        _this.option.series[0].data = arr;
                        var myChart = echarts.init(document.getElementById('chartmain'));
                        myChart.setOption(_this.option);
                    },
                    error : function() {

                    }
                });
            },

            selectproject : function(){
                var _this = this;
                $.ajax({
                    url : "/project",
                    type : "get",
                    dataType : "json",
                    success : function(data) {
                       _this.projects=data.list;
                    },
                    error : function() {

                    }
                });
            }
        },

    });

</script>
</body>
</html>